<template>
  <div class="rework-container">
    <el-card shadow="never" style="margin-top: 16px;">
      <div slot="header" class="clearfix">
        <el-button style="float: right;" type="primary" icon="el-icon-plus" @click="add">新增</el-button>
      </div>

      <el-input v-model="searchKey" placeholder="请输入内容" class="inSearch" style="width: 30%" clearable @clear="clearInput">
        <el-button slot="append" icon="el-icon-search" @click="getData"></el-button>
      </el-input>
      <el-alert type="success" show-icon :title="findTableTotal" :closable="false" style="margin: 12px 0 0 0 "></el-alert>
      <!--表格 -->
      <AzureDynamicTable :data="tableData" :column-des-objs="columnDesObjs" :show-seq="true"
                         :border="false"
      >
        <!--操作 -->
        <template slot="operator" slot-scope="{scope:{row,$index}}">
          <AButton @click="edit({row})">修改</AButton>
          <AButton @click="remove({row})" type="info">删除</AButton>
        </template>
      </AzureDynamicTable>
    </el-card>

    <pagination :limit.sync="pageSize" :page.sync="currentPage"
                :total="total"
                @pagination="getData"
                v-show="total>0"/>

    <!--新增 -->
    <el-dialog title="新增数据" :visible.sync="dialogAddVisible">
      <el-form label-width="190px" :model="addReworkForm">
        <el-form-item label="返工解决方法名称">
          <el-input style="width: 50%" v-model="addReworkForm.Description"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer">
        <el-button @click="dialogAddVisible = false">取消</el-button>
        <el-button type="primary" @click="submitAdd()">确定</el-button>
      </div>
    </el-dialog>
    <!--编辑 -->
    <el-dialog title="修改数据" :visible.sync="dialogEditVisible">
      <el-form :model="editForm" :label-width="globalLabelWidth1">
        <el-form-item label="返工解决方法编码">
          <el-input style="width: 50%" v-model="editForm.SolutionID"></el-input>
        </el-form-item>
        <el-form-item label="返工解决方法名称">
          <el-input style="width: 50%" v-model="editForm.Description"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer">
        <el-button @click="dialogAddVisible = false">取消</el-button>
        <el-button type="primary" @click="submitEdit">确定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
  import AzureDynamicTable from '@/components/ATheFridayClub/mDynamicTable/AzureDynamicTable'
  import pagination from '@/components/Pagination/index'
  import HeaderHelpDoc from '@/components/ATheFridayClub/HeaderHelpDoc'
  import { GetSolution, AddSolution, UpdateSolution, DeleteSolution } from '@/api/badReasons'
  import { ERR_OK } from '@/utils/commons'
  import { getBadReasonsStatus } from '@/enums/basics'
  import form from '@/mixins/form'
  import layoutMixin from '@/mixins/layoutMixin'
  import { deepClone } from '@/utils'
  import AButton from '@/components/ATheFridayClub/AButton'


  export default {
    name: 'reworkSolution',
    components: { AzureDynamicTable, pagination, HeaderHelpDoc,AButton },
    mixins: [form, layoutMixin],
    data() {
      return {
        headText:'已查询到',
        headContext: '对返工解决方法进行增删改查等等常规操作。',
        tableData: [],
        columnDesObjs: [
          { label: '返工解决方法编码', key: 'SolutionID' ,tag: true},
          { label: '返工解决方法名称', key: 'Description' },
          // { label: '状态', key: 'Status', tag: true, filter: getBadReasonsStatus },
          { label: '创建人', key: 'CreateByMan' },
          { label: '创建时间', key: 'CreateTime', dateFormat: true },
          { label: '更新人', key: 'LastModifyBy' },
          { label: '更新时间', key: 'LastModifyTime', dateFormat: true },
          { label: '操作', key: 'operator' }
        ],
        addReworkForm: {
          Description: ''
        },
        editForm: {},
        searchKey: '',
        currentPage: 1,
        total: 0,
        pageSize: 10,
        dialogEditVisible: false,
        dialogAddVisible: false
      }
    },
    computed:{
      findTableTotal(){
        return `成功查询到 ${this.total} 条返工解决方法`
      }
    },
    created() {
      this.getData()
    },
    methods: {
      async getData({ inPage = this.currentPage, inPageSize = this.pageSize, inDescription = this.searchKey } = {}) {
        try {
          const { Code, Result } = await GetSolution({ inPage, inPageSize, inDescription })
          if (Code === ERR_OK) {
            const { Rows,CurrentPage } = Result
            this.tableData = Rows
            this.currentPage = CurrentPage
            this.total = Rows.length
          }
        } catch (e) {

        }
      },
      add(){
        this.dialogAddVisible = true
      },
      async submitAdd() {
        try {
          const { Description } = this.addReworkForm
          const { Code, Result } = await AddSolution({ Description })
          if (Code === ERR_OK) {
            this.$message.success('新增数据成功！')
            this.dialogAddVisible = false
            await this.getData()
          }
        }catch (e) {

        }
      },
      edit(row) {
        console.log(row,155)
        this.dialogEditVisible = true
        this.editForm = deepClone(row.row)
      },
      remove(row) {
        this.$confirm('此操作将永久删除选中的数据, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(async() => {
          const { SolutionID } = row.row
          const { Code, Result } = await DeleteSolution({ inSolutionId:SolutionID })
          if (Code === ERR_OK) {
            this.$message.success('删除成功！')
            await this.getData()
          }
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          })
        })
      },
      async submitEdit() {
        try {
          const { SolutionID, Description } = this.editForm
          const { Code, Result } = await UpdateSolution({ SolutionID, Description })
          if (Code === ERR_OK) {
            this.$message.success('修改数据成功！')
            this.dialogEditVisible = false
            await this.getData()
          }
        } catch (e) {

        }
      },
      clearInput(){
        this.getData()
      }
    }
  }
</script>

<style scoped lang="scss">
</style>
